<template>
  <div class="message">
    <van-nav-bar
      title="我的消息"
      @click-left="onClickLeft"
      right-text="全部已读"
      @click-right="onClickRight"
    >
      <template #left>
        <i class="iconfont iconbtn_nav_back"></i>
      </template>
    </van-nav-bar>
    <div class="box">
      <div class="smallbox" v-for="(item, index) in list" :key="index">
        <van-cell-group>
          <van-cell :title="item.content" is-link>
            <template #default>
              <span class="rund" v-if="item.isRead == false"></span>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script>
import { messagess, singRead } from '@/api/api.js'
export default {
  created () {
    this.getMessage()
  },
  data () {
    return {
      // 消息列表
      list: [],
      // 消息列表Id
      listId: []
    }
  },
  methods: {
    // 点击返回上一页
    onClickLeft () {
      this.$router.go(-1)
    },
    // 全部标记已读
    async onClickRight () {
      this.listId = []
      this.list.map(item => {
        this.listId.push(item.id)
      })
      await singRead({ ids: [...this.listId] })
      // this.list = this.list.map(item => {
      //   item.isRead = true
      // })
    },
    // 获取消息列表
    async getMessage () {
      const data = await messagess()
      this.list = data.data
    }
  }
}
</script>

<style lang="less" scoped>
.message {
  padding-top: 10px;
  /deep/ .iconfont {
    font-size: 35px;
  }

  /deep/ [class*='van-hairline']::after {
    border: none;
  }
  .box {
    /deep/ [data-v-c9bb5b84] {
      font-size: 10px;
    }
    height: 812px;
    background-color: #f7f4f5;
    padding-top: 10px;
    .smallbox {
      border-radius: 8px;
      width: 92%;
      margin: 19px;
      border-radius: 8px;
      overflow: hidden;
      .rund {
        display: inline-block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: #ff4949;
      }
    }
  }
}
</style>
